.steps{
	display: flex;
	.step-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 96rpx;
		.item-icon{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background-color: #e7e7e7;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #cccccc;
			margin-bottom: 24rpx;
			position: relative;
			&.success{
				color: #ffffff;
				background-image: linear-gradient(to right,#47d79f 0%,#44c67e 100%);
			}
			.point-list{
				position: absolute;
				right: -24rpx;
				transform: translate(100%,-50%);
				top: 50%;
				width: 80rpx;
				display: flex;
				.point{
					background-color: #cccccc;
					width: 6rpx;
					height: 6rpx;
					margin-right: 4rpx;
					border-radius: 50%;
					&.success{
						background-color: #47d79f;
					}
					&.current{
						animation-name: pointBreathe;
						animation-duration: 2s;
						animation-timing-function: linear;
						animation-iteration-count:infinite;
					}
				}
			}
		}
		.item-text{
			font-size: 24rpx;
			font-family: $global-font-family;
			font-weight: 400;
			color: #666666;
		}
	}
}


@keyframes pointBreathe{
	0%{
		background-color: #cccccc;
	}
	100%{
		background-color: #47d79f;
	}
}